<template>
    <van-nav-bar
        title="我的发布"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
    <van-form>
        <div style="position: absolute; top: 33px; left: 0;">
            <p>房源图片</p>
            <van-uploader
                v-model="fileList"
                multiple
                :after-read="afterRead"
                accept="image/*"
                :max-count="9"
                :show-upload-list="false"
                label="房源图片"
            >
                <template #preview-cover="{ fileList }">
                    <div class="preview-cover van-ellipsis">换租</div>
                </template>
            </van-uploader>
            <p>租赁类型</p>
            <van-row gutter="20">
                <van-col v-for="type in rentalTypes" :key="type.value" span="8">
                    <van-button
                        :type="isSelected(type.value) ? 'primary' : 'default'"
                        @click="toggleSelection(type.value)"
                        class="rental-type-button"
                        block
                    >
                        {{ type.label }}
                    </van-button>
                </van-col>
            </van-row>
            <p>房源亮点</p>
            <van-row gutter="20">
                <van-col v-for="type in highlights" :key="type.value" span="8">
                    <van-button
                        :type="isSelected(type.value) ? 'primary' : 'default'"
                        @click="toggleSelection(type.value)"
                        class="rental-type-button"
                        block
                    >
                        {{ type.label }}
                    </van-button>
                </van-col>
            </van-row>
            <p>房源详情</p>
            <van-field v-model="description" label="位置" placeholder="请输入位置" />
            <van-field v-model="floor" label="房源楼层" placeholder="请输入房源楼层" />
            <van-field v-model="house_type" label="房源户型" placeholder="请输入房源户型" />
            <van-field v-model="area" label="房屋面积" placeholder="请输入房屋面积" />
            <van-field v-model="price" label="房源租金" placeholder="元/月" />
            <van-field v-model="pay" label="付款方式" placeholder="选择付款方式" />
            <p>设施配套</p>
            <button @click="onSubmit">下一步</button>
        </div>
    </van-form>
</template>

<script setup>
import {ref} from "vue";
import {postFile} from "../../util/reqeustfile.js";
import {get, post} from "../../util/request.js";
import {showToast} from "vant";
import {useRouter} from "vue-router";
import {useStore} from "../../pinia/index.js";

const listing = ref({})
const onClickLeft = () => history.back();
const fileList = ref([]);//房源图片列表
const value = ref([
    { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
]);
const formData = ref({
    title: '',
    location: '',
    features: [], // 房源亮点数组
});
const rentalTypes = [
    { value: 'whole', label: '整租' },
    { value: 'shared', label: '合租' }
];
const highlights = [
    { value: '1', label: '独卫' },
    { value: '2', label: '阳台' },
    { value: '3', label: '飘窗' },
    { value: '4', label: '精装' },
    { value: '5', label: '可养宠物' },
];
const facilities = ref([
    { value: '1', label: '床' },
    { value: '2', label: '洗衣机' },
    { value: '3', label: '空调' },
    { value: '4', label: '阳台' },
    { value: '5', label: '冰箱' },
    { value: '6', label: '卫生间' },
    { value: '7', label: '可做饭' },
    { value: '8', label: '电视' },
    { value: '9', label: '热水器' },
    { value: '10', label: '宽带' },
    { value: '11', label: '沙发' },
    { value: '12', label: '暖气' },
    { value: '13', label: '衣柜' },
]);
const selectedValues1 = ref([])// 用于存储选中的值1
const selectedValues2 = ref([])// 用于存储选中的值2
const selectedTypes = ref([]);
const description = ref();
const floor = ref();
const house_type = ref();
const area = ref();
const price = ref();
const pay = ref();
const router=useRouter();
const storeUser=useStore();

function toggleFacility(index) {
    facilities.value[index].selected = !facilities.value[index].selected;
}

const toggleSelection = (type) => {
    if (isSelected(type)) {
        selectedTypes.value = selectedTypes.value.filter(t => t !== type);
    } else {
        selectedTypes.value.push(type);
    }
};

const isSelected = (type) => {
    return selectedTypes.value.includes(type);
};
const onSubmit = () => {
    listing.value.description = description.value
    listing.value.floor = floor.value
    listing.value.houseType = house_type.value
    listing.value.area = area.value
    listing.value.price = price.value
    listing.value.pay = pay.value
    listing.value.userId = storeUser.user.id
    listing.value.url = fileList.value[0].url
    console.log(listing.value)
    post("user/posting",listing.value).then( (res)=>{
        if (res.code === 0) {
            console.log(JSON.stringify(res.data))
            showToast('发布房源成功');
            router.push({path:"/posting",query:{id:res.data.userId}});
        } else {
            // 处理错误情况
            console.error(`Error: ${res.message}`);
        }
    })
};
// 读取文件后的处理
const afterRead = (file) => {
    // 此时可以自行将文件上传至服务器
    console.log(file);
    postFile("minio/upload", file.file).then(r => {
        console.log("url:" + r.data);
        fileList.value[0].url = r.data; // 修改图片地址
        // 如果需要提交到后台，可以提交该用户的id 和 当前头像的地址，修改用户头像即可
        // get("user/posting", {url:r.data}).then(res => {
        //     if (res.code === 0) {
        //         fileList.value = res.data;
        //     } else {
        //         // 处理错误情况
        //         console.error(`Error: ${res.message}`);
        //     }
        // }).catch(error => {
        //     // 处理请求错误
        //     console.error("请求失败:", error);
        // });
    }).catch(error => {
        // 处理上传文件失败
        console.error("文件上传失败:", error);
    });
};



</script>

<style scoped>
p {
    color: blue;
}
.preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}
</style>